<template>
  <Layout>
    <div class="row">
      <div class="col-12">
        <div class="page-title-box">
          <h4 class="mb-0 newstyle">
            <div style="display:flex;">
              <div class="breadcrumb-item" v-for="(item,index) in items" :key="index">
                <span @click="jump(index)">{{item.text}}</span>
              </div>
            </div>
          </h4>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-8">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-3">
              深挖！2022在海口买房，千万别忽视这3大片区！
            </h4>
            <div class="basicInfo">
              <span>时间：23小时前</span>
              <span>来源：Zaker</span>
              <span style="float:right;">查看原文</span>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <p><strong>乐居买房讯</strong> 2021 年上半年，海口共引进人才落户 47698 人，认定高层次人才 1168 人，对于新海南人来说，在海口买房应该着重考虑哪个片区？无论是自行上网了解还是向中介咨询，海口未来发展最大的区域无外乎 " 江东新区、西海岸、国兴片区 "。</p>
            <p><strong>《江东新区》</strong></p>
            <p>发展方向：2018 年 6 月 3 日海南决定设立海口江东新区，作为建设中国（海南）自由贸易港的重点先行区域，战略定位是建设全面深化改革开放创新区、国家生态文明展示区、国际旅游消费中心、国家重大战略服务保障区，目前已签约引进世界 500 强企业超 21 家，政策的加持让购房者看到了江东新区国际化发展的态势。</p>
            <p><strong>生活配套：</strong>北京师范大学海口附属学校、海口哈罗学校、江东寰岛实验学校、海口寰岛小学、江东卫生院等。</p>
            <p><strong>交通配套：</strong>江东大道、白驹大道、海口绕城高速、文明东越江隧道、海文大桥。</p>
            <p><strong>规划建设中的配套：</strong>春晖园安置社区、椰青园安置社区、兰香园安置社区均配套学校，海南省中医院新院区，海南医学院第一附属医院江东新院区，海口市妇幼保健院江东园区等。</p>
            <p><strong>房价走势及楼盘推荐：</strong>片区的房价多为 15000-17500 元 /㎡区间内，购房客户以在江东新区及美兰机场等地工作的客群为主。江东新区获批的住宅土地较少，新项目的量少，且现在多处于规划建设阶段，百业待兴，生活上仍稍有不便，目前新盘主要以仁恒滨江园、万华 · 江东鹭岛为主。</p>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="card">
          <div class="card-body">
            <div class="form-group">
              <label for="price">行业</label>
              <multiselect
                v-model="industry"
                :options="industryList"
                placeholder="行业"
              ></multiselect>
            </div>
            <div class="form-group">
              <label for="price">事件</label>
              <multiselect
                v-model="event"
                :options="eventList"
                placeholder="事件"
              ></multiselect>
            </div>
            <div class="form-group">
              <label for="price">情感</label>
              <multiselect
                v-model="emotion"
                :options="emotionList"
                placeholder="情感"
              ></multiselect>
            </div>
            <div class="form-group">
              <label for="price">省市</label>
              <multiselect
                v-model="province"
                :options="provinceList"
                placeholder="省市"
              ></multiselect>
            </div>
            <div class="form-group">
              <label for="price">时间</label>
              <el-date-picker
                v-model="dateRange"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                >
              </el-date-picker>
            </div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-body">
            <div class="form-group">
              <label for="price">公司</label>
              <b-form-input
                for="text"
                v-model="company"
                placeholder="公司"
              ></b-form-input>
            </div>
            <div class="form-group">
              <label for="price">上市公司</label>
              <b-form-input
                for="text"
                v-model="listCompany"
                placeholder="上市公司"
              ></b-form-input>
            </div>
            <div class="form-group">
              <label for="price">政府</label>
              <b-form-input
                for="text"
                v-model="government"
                placeholder="政府"
              ></b-form-input>
            </div>
          </div>
        </div>
        <div class="text-right">
          <b-button variant="primary">提交</b-button>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";

import Multiselect from "vue-multiselect";
export default {
  components: {
    Layout,

    Multiselect,
  },
  data () {
    return {
      items: [
        {
          text: "标签管理",
          url: "/lable",
        },{
          text: "资讯标记数据",
          url: "/",
        }
      ],
      industry: "",
      industryList: ["服务采购","建筑工程","信息技术"],
      event: "",
      eventList: ["事件1","事件2"],
      emotion: "",
      emotionList: ["积极","消极","中性"],
      province: "",
      provinceList: ["省市1","省市2"],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      dateRange: "",
      company: "",
      listCompany: "",
      government: "",
    }
  },
  methods: {
    jump(i){
      if(i==this.items.length-1){
        return;
      }
      this.$router.push(this.items[i].url)
    }
  }
}
</script>
<style lang="scss" scoped>
.card-title{
  font-size: 18px;
  font-weight: 600;
}
.basicInfo{
  span{
    margin-left: 20px;
  }
  span:first-child{
    margin-left: 0px;
  }
}
.newstyle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .breadcrumb-item{
    span{
      cursor: pointer;
    }
  }
  .breadcrumb-item:last-child{
    span{
      cursor: default;
    }
  }
}
.title_right{
  font-weight: normal;
  font-size: 0.7rem;
  color: #74788d;
}
label{
  font-weight: 500;
}
::v-deep .el-date-editor--datetimerange.el-input__inner{
  width: 100%;
}
</style>
